$(function () {
  let q = {
    pagenum	: 1 ,    //是	int	页码值
    pagesize :30,	   //是	int	每页显示多少条数据
    cate_id	 :'',    //否	string	文章分类的 Id
    state :''	,      //否	string	文章的状态，可选值有：已发布、草稿
  }
  // 需求1：初始化文章列表 - 封装成函数，将来复用
  initArticleList()  //调用初始化文章列表
  function initArticleList() {
    axios({
      url:'/my/article/list',
      method:'get',
      params: q
    }).then(res=>{
      //成功回调
      // console.log(res.data.data)
      if(res.data.status !==0){
        return layer.msg(res.data.message)
      }
      // 渲染
      let arr = []
      res.data.data.forEach(ele =>{
        arr.push(`
        <tr>
        <td>${ele.title}</td>
        <td>${ele.cate_name}</td>
        <td>${dateFormat(ele.pub_date)}</td>
        <td>${ele.state}</td>
        <td>
          <button  class="layui-btn layui-btn-xs">编辑</button>
          <button data-id="${ele.Id}" class=" del-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>
        </td>
      </tr>`)
      })
      // 循环结束后，赋值
      $('tbody').empty().html(arr.join(''))
       // 分页
       renderPage(res.data.total)
    });
  }
  // 需求2：渲染筛选中的文章类别列表
  let form = layui.form
  initArtCateList()
  function initArtCateList() {
    axios({
      url: '/my/article/cates',
      // method:'get',
    }).then(res => {
      //成功回调
      // console.log(res)
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      // 成功：提示
      let arr = ['<option value="">请选择文章所属分类</option>']
      res.data.data.forEach(ele => {
        arr.push(`<option value="${ele.Id}">${ele.name}</option>`)

      })
      // 循环结束赋值
      let str = arr.join('')
      $('[name=cate_id]').empty().html(str)
      form.render()
     
    });
  }

  // 需求3：筛选
  $('#searchForm').on('submit',function(e){
    e.preventDefault()
    // cate_id和state的值修改，根据form表单里面的值修改
    q.cate_id = $('[name=cate_id]').val()
    q.state= $('[name=state]').val()
    // 重新渲染  文章列表
    initArticleList()
  })

  // 需求4:分页
   function renderPage(total) {
    let laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
      elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
      count: total ,//数据总数，从服务端得到
      limit: q.pagesize, //每页显示多少条
      curr:  q.pagenum, //第几页
      // 显示区域
      layout:['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
      limits:[2,3,5,10],

      jump:function(obj,first) {
        if(!first) {
          q.pagenum = obj.curr
          q.pagesize = obj.limit
          initArticleList()
        }
      }
    });
   }
  
  // 需求5：删除  事件委托
   $('tbody').on('click', '.del-btn', function(){
    let id = $(this).attr('data-id')
    layer.confirm('是否确定删除?', {icon:3, title:'提示'}, function(index) {
      //删除的ajax
      axios({
        //  保留  删除
        url:'/my/article/delete/'+id,
        method:'get',
      }).then(res=>{
       if(res.data.status !==0) {
         return layer.msg(res.data.message)
       }
      //  成功，提示 刷新页面
      layer.msg('恭喜您，删除文章成功!')
      // (删除ajax成功后)当我们再次发起请求的时候，如果页面中还有一条数据，当前页面--，当前页面大于等于2有资格--
      // if （$('.del-btn').length == 1 && q.pagenum >= 2）q.pagenum--
      // 优化 - 短路运算，前面的代码满足条件，后面的才会执行
      $('.del-btn').length == 1&& q.pagenum >=2 && q.pagenum
      initArticleList()
      })
      layer.close(index)
    })
   })
})